{
  "properties" : { },
  "id" : "a37a47467579421ab91aa5deda6a4443",
  "script" : null,
  "groupId" : "0261e43407c04ca8a513406f4ce13134",
  "name" : "workbench.html",
  "createTime" : null,
  "updateTime" : 1740120656401,
  "lock" : null,
  "createBy" : null,
  "updateBy" : "可辉",
  "path" : "workbench.html"
}
================================
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>工作台</title>
    <link rel="stylesheet" href="/plugs/layui/css/layui.css" />
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
      html, body { height: 100%; background: #f5f5f5; }
      .data-overview { display: flex; gap: 24px; margin-bottom: 24px; }
      .data-group { display: flex; gap: 24px; }
      .data-group-title { font-size: 18px; color: #1a1a1a; margin-bottom: 16px; font-weight: 600; position: relative; padding-left: 12px; }
      .data-group-title:before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 18px; background: #1890ff; border-radius: 2px; }
      .data-card { flex: 1; padding: 24px; background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); transition: all 0.3s ease; }
      .data-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
      .data-card .title { font-size: 15px; color: #666; margin-bottom: 12px; }
      .data-card .number { font-size: 28px; font-weight: 600; color: #1890ff; margin-bottom: 8px; }
      .data-card .ratio { font-size: 14px; color: #666; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e8e8e8; }
      .middle-section { display: flex; gap: 20px; margin-bottom: 20px; }
      .rank-list { flex: 1.5; background: #fff; padding: 20px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
      .rank-list-title { font-size: 16px; color: #333; margin-bottom: 15px; font-weight: bold; }
      .action-buttons { flex: 1; display: grid; padding-right: 20px; grid-template-columns: repeat(2, 1fr); gap: 15px; }
      .message-section { height: 100%; }
      //.message-section { background: #fff; padding: 20px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); height: 100%; }
      .message-title { font-size: 16px; color: #333; margin-bottom: 15px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; }
      .message-list { max-height: 350px; overflow-y: auto; padding-right: 5px; }
      .message-item { padding: 8px; margin-bottom: 4px; border-bottom: 1px solid #f0f0f0; border-radius: 4px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.1);  }
      .message-item:last-child { border-bottom: none; }
      .message-content { font-size: 14px; color: #666; margin-bottom: 4px; }
      .message-time { font-size: 12px; color: #999; text-align: right; }
      .message-more { color: #1890ff; cursor: pointer; font-size: 14px; }
      .action-btn { padding: 20px; text-align: center; background: #fff; border-radius: 4px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: all 0.3s; display: flex; flex-direction: column; align-items: center; justify-content: center; }
      .action-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); background: #f8f8f8; }
      .action-btn i { font-size: 58px; margin-bottom: 8px; color: #1890ff; }
      .action-btn div { font-size: 16px; color: #333; font-weight: 500; }
      .task-stats { background: #fff; padding: 20px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
      /*
      @media screen and (max-width: 1200px) {
        .data-overview { flex-direction: column; }
        .data-group { flex-wrap: wrap; }
        .data-card { flex: calc(50% - 12px); }
      }
      @media screen and (max-width: 768px) {
        .middle-section { flex-direction: column; }
        .rank-list, .action-buttons { width: 100%; }
        .action-buttons { grid-template-columns: repeat(2, 1fr); }
      }
      @media screen and (max-width: 480px) {
        .data-card { flex: 100%; }
        .action-buttons { grid-template-columns: 1fr; }
      }
      */
    </style>
</head>
<body class="layui-padding-2">

<!-- 数据概览区域 -->
<div class="layui-row layui-padding-2">
  <div class="layui-col-xs12 layui-col-sm12 layui-col-md8" style="padding-right: 20px; ">
    
    <!-- 组织数据 -->
    <div style="margin-bottom: 24px;">
      <div class="data-group-title">我的组织数据 <span class="layui-badge">（包含所有下级统计后的结果）</span></div>
      <div class="data-group">
        <div class="data-card">
          <div class="title">本周上报</div>
          <div class="number" id="orgWeekReport">0</div>
          <div class="ratio" id="orgWeekRatio">通过：0</div>
        </div>
        <div class="data-card">
          <div class="title">本月上报</div>
          <div class="number" id="orgMonthReport">0</div>
          <div class="ratio" id="orgMonthRatio">通过：0</div>
        </div>
        <div class="data-card">
          <div class="title">本季上报</div>
          <div class="number" id="orgQuarterReport">0</div>
          <div class="ratio" id="orgQuarterRatio">通过：0</div>
        </div>
        <div class="data-card">
          <div class="title">本年上报</div>
          <div class="number" id="orgYearReport">0</div>
          <div class="ratio" id="orgYearRatio">通过：0</div>
        </div>
      </div>
    </div>
    
    <!-- 个人数据 -->
    <div>
      <div class="data-group-title">个人数据</div>
      <div class="data-group">
        <div class="data-card">
          <div class="title">本周上报</div>
          <div class="number" id="personalWeekReport">0</div>
          <div class="ratio" id="personalWeekRatio">通过：0</div>
        </div>
        <div class="data-card">
          <div class="title">本月上报</div>
          <div class="number" id="personalMonthReport">0</div>
          <div class="ratio" id="personalMonthRatio">通过：0</div>
        </div>
        <div class="data-card">
          <div class="title">本季上报</div>
          <div class="number" id="personalQuarterReport">0</div>
          <div class="ratio" id="personalQuarterRatio">通过：0</div>
        </div>
        <div class="data-card">
          <div class="title">本年上报</div>
          <div class="number" id="personalYearReport">0</div>
          <div class="ratio" id="personalYearRatio">通过：0</div>
        </div>
      </div>
    </div>
  
  </div>

  <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
    <div class="message-section">
      <div class="data-group-title">消息提醒</div>
      <div class="message-list" style="">
        <div class="message-item">
          <div class="message-content">技术部提交了新的周报，等待审批</div>
          <div class="message-time">10分钟前</div>
        </div>
        <div class="message-item">
          <div class="message-content">您的月度总结已通过审核</div>
          <div class="message-time">2小时前</div>
        </div>
        <div class="message-item">
          <div class="message-content">新增任务：第三季度工作计划制定</div>
          <div class="message-time">昨天 14:30</div>
        </div>
        <div class="message-item">
          <div class="message-content">系统更新：新增数据分析功能</div>
          <div class="message-time">2023-07-20</div>
        </div>
        <div class="message-item">
          <div class="message-content">系统更新：新增数据分析功能</div>
          <div class="message-time">2023-07-20</div>
        </div>
        <div class="message-item">
          <div class="message-content">系统更新：新增数据分析功能</div>
          <div class="message-time">2023-07-20</div>
        </div>
      </div>

    </div>
  </div>

</div>

<!-- 中间区域 -->
<div class="layui-row layui-padding-2">
  <div class="layui-col-xs12 layui-col-md7" style="margin-bottom: 12px; padding-right: 20px;">
    <div class="rank-list">
      <table id="rankTable" lay-filter="rankTable"></table>
    </div>
  </div>
  <div class="layui-col-xs12 layui-col-md5" style="margin-bottom: 12px;">
    <div class="action-buttons">
      <div class="action-btn" id="reportBtn">
        <i class="layui-icon layui-icon-form"></i>
        <div>数据上报</div>
      </div>
      <div class="action-btn" id="taskBtn">
        <i class="layui-icon layui-icon-list"></i>
        <div>任务处理</div>
      </div>
      <div class="action-btn" id="orgBtn">
        <i class="layui-icon layui-icon-group"></i>
        <div>组织信息</div>
      </div>
      <div class="action-btn" id="noteBtn">
        <i class="layui-icon layui-icon-note"></i>
        <div>标签维护</div>
      </div>
    </div>
  </div>
</div>

<!-- 任务统计区域 -->
<div class="layui-row layui-padding-2">
  <div class="layui-col-xs12 layui-col-md12">
    <div id="taskChart" style="height: 300px;"></div>
  </div>
</div>

  <script src="/plugs/layui/layui.js"></script>
  <script src="/plugs/echarts.js"></script>
  <script type="text/javascript">
    layui.use(['table'], function(){
      var table = layui.table;
      var $ = layui.jquery;

      // 初始化积分排行表格
      table.render({
        elem: '#rankTable',
        data: [  // 使用模拟数据
          {rank: 1, unitName: '技术部', points: 2800},
          {rank: 2, unitName: '市场部', points: 2500},
          {rank: 3, unitName: '运营部', points: 2300},
          {rank: 4, unitName: '人力资源部', points: 2100},
          {rank: 5, unitName: '财务部', points: 1900}
        ],
        cols: [[
          {field: 'rank', title: '排名', width: 80, sort: true},
          {field: 'unitName', title: '单位名称'},
          {field: 'points', title: '积分', width: 100, sort: true}
        ]],
        limit: 5,
        page: false
      });

      // 标签统计TOP10
      var taskChart = echarts.init(document.getElementById('taskChart'));
      var taskOption = {
        title: {
          text: '标签统计TOP10',
          textStyle: { fontSize: 16, fontWeight: 'bold' },
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          data: ['上报数量', '通过率'],
          top: 30
        },
        radar: {
          indicator: [
            { name: '业务报表', max: 300 },
            { name: '财务数据', max: 300 },
            { name: '人事档案', max: 300 },
            { name: '项目进度', max: 300 },
            { name: '客户反馈', max: 300 },
            { name: '销售业绩', max: 300 },
            { name: '库存管理', max: 300 },
            { name: '设备维护', max: 300 },
            { name: '质量检测', max: 300 },
            { name: '安全生产', max: 300 }
          ],
          radius: '65%',
          center: ['50%', '60%'],
          name: {
            textStyle: {
              color: '#666',
              fontSize: 12
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['#f5f5f5', '#fff']
            }
          },
          axisLine: {
            lineStyle: {
              color: '#ddd'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#ddd'
            }
          }
        },
        series: [{
          name: '数据统计',
          type: 'radar',
          data: [{
            name: '上报数量',
            value: [286, 245, 198, 187, 165, 148, 142, 128, 115, 98],
            itemStyle: {
              color: '#1890ff'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(24,144,255,0.3)'
              }, {
                offset: 1,
                color: 'rgba(24,144,255,0.1)'
              }])
            }
          }, {
            name: '通过率',
            value: [96.5, 94.2, 92.8, 93.5, 90.2, 91.8, 89.5, 92.3, 88.7, 87.4],
            itemStyle: {
              color: '#ff9f7f'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(255,159,127,0.3)'
              }, {
                offset: 1,
                color: 'rgba(255,159,127,0.1)'
              }])
            }
          }]
        }]
      };
      taskChart.setOption(taskOption);

      // 绑定按钮事件
      $('#reportBtn').on('click', function(){
        layer.msg('跳转到数据上报页面');
      });
      $('#orgBtn').on('click', function(){
        layer.msg('跳转到组织信息页面');
      });
      $('#taskBtn').on('click', function(){
        layer.msg('跳转到任务处理页面');
      });
    });
  </script>
</body>
</html>